<template>
  <!-- 暗黑主题 -->
  <!-- <van-config-provider theme="dark"></van-config-provider> -->
  <RouterView>
    <template #default="{ Component, route }">
      <!-- <transition :name="route.meta.transition || 'fade'"> -->
      <!-- <keep-alive v-if="route.meta.keepAlive">
        <component :is="Component" :key="route.path" />
      </keep-alive> -->
      <component :is="Component" :key="route.path" />
      <!-- <component :is="Component" :key="route.path" /> -->
      <!-- </transition> -->
    </template>
  </RouterView>
</template>

<script setup>
import "vant/es/toast/style";
import "vant/es/dialog/style";
import 'vant/es/notify/style';
import 'vant/es/image-preview/style';
import "vant/lib/index.css";
</script>
<style lang="less">
// 全局样式
@import "@/styles/index.less";

.live-ptz-title {
  color: #fff !important;
  padding: 10px 0;
  margin: 30px 0 12px !important;
}

#mobile-ez-ptz-container {
  width: 100% !important;

  .mobile-ez-ptz-container {
    width: 280px !important;
    height: 280px !important;
  }
}

.live-ptz-intro {
  margin-bottom: 20px !important;
}

.flexLr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Textellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}

.slide-enter-to {
  position: absolute;
  right: 0;
}

.slide-enter-from {
  position: absolute;
  right: -100%;
}

.slide-leave-to {
  position: absolute;
  left: -100%;
}

.slide-leave-from {
  position: absolute;
  left: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.van-dialog,
.van-dialog__cancel,
.van-dialog__confirm {
  background-color: #111d37 !important;

  .van-dialog__header,
  .van-dialog__message {
    color: #fff;
  }
}

.van-dialog__cancel .van-button__text {
  color: #fff;
}

.van-popup {
  border-radius: 20px 20px 0 0;
  background-color: #010515;
}

.van-picker-column {
  background-color: transparent !important;
}

.van-hairline-unset--top-bottom:after {
  border: none;
}

.van-picker__toolbar {
  .van-picker__title {
    color: #fff;
  }
}

.van-picker__mask {
  display: none;
}

.van-picker-column__item {
  color: #999999 !important;
}

.van-picker-column__item--selected {
  color: #FFFFFF !important;
  background-color: transparent !important;
  border: none;
}

.van-picker {
  background-color: #010515 !important;
}

.flex_column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.flexLR {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex {
  display: flex;
  align-items: center;
}

.bottomCard {
  width: 93%;
  background: url('../src/assets/images/底板2.png') no-repeat;
  margin: 0 auto;
  background-size: 100% auto;
}

.CardTitleText {
  font-size: 30px;
  font-weight: 700;
  padding: 24px 16px;
}

.whiteCard {
  width: 100%;
  background: #fff;
  border-radius: 10px;
}

.whiteCard1 {
  width: 100%;
  background: url('../src/assets/images/白底.png') no-repeat;
  margin: 0 auto;
  background-size: 100% auto;
}

.van-popup--center {
  border-radius: 0.12rem !important;
}

.floating-bubble {
  background-color: #F6F7F9 !important;
  color: #2470FF !important;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05) !important;
}
</style>
